<template>
  <div class="email-container">
    <div class="transfer-item">
      <div class="item-top">
        <span class="title">{{title}}</span>
        <div class="filter-btns">
          <a-radio-group v-model="notificationService.smtAction">
            <a-radio value="AND">AND</a-radio>
            <a-radio value="OR">OR</a-radio>
          </a-radio-group>
        </div>
      </div>
      <div class="filter-conditions">
        <a-form-model layout="inline">
          <a-form-model-item label="ATA">
            <a-input
              v-model="search.ataCode"
              placeholder="请输入"
              style="width: 240px"
            />
          </a-form-model-item>
          <a-form-model-item label="Code Number" class="mr-16">
            <a-input
              v-model="search.errorCode"
              placeholder="请输入"
              style="width: 240px"
            />
          </a-form-model-item>
          <a-form-model-item label="Name" class="mr-16">
            <a-input
              v-model="search.errorName"
              placeholder="请输入"
              style="width: 240px"
            />
          </a-form-model-item>
          <a-form-model-item>
            <a-button type="default" :loading="loading" @click="resetData"> 重置 </a-button>
            <a-button type="primary" class="ml-8" :loading="loading" @click="getData"> 查询 </a-button>
          </a-form-model-item>
        </a-form-model>
      </div>

      <div class="mt-12">
        <div class="sub-title">可选</div>
        <a-transfer
          :data-source="SMTList"
          :titles="['', '']"
          :render="(item) => item.faultName"
          :target-keys="targetKeys"
          class="virtual-transfer-box"
          :selected-keys="selectedKeys"
          :list-style="{
            width: '50%',
            height: '180px',
          }"
          @change="handleChange"
          @selectChange="handleSelectChange"
        >
          <template
            slot="children"
            slot-scope="{
              props: { direction, filteredItems },
              on: { itemSelect }
            }"
          >
            <a-checkbox-group
              v-if="filteredItems.length>0"
              :ref="`c${direction}`"
              :value="selectedKeys"
              @change="(v)=>changeCB(v,itemSelect)"
            >
              <RecycleScroller

                class="virtual-selector__transfer"
                :items="filteredItems"
                :item-size="33"
                key-field="key"
              >

                <div slot-scope="{ item,index }" :class="`transfer-i-box transfer-i-box-${index%2}`">

                  <a-checkbox :value="item.key">
                    <div class="d-flex ai-center jc-between">
                      <div class="text-over">{{ item.faultName }}</div>
                      <div>{{ item.code }}</div>
                    </div>
                  </a-checkbox>
                </div>

              </RecycleScroller>

            </a-checkbox-group>
            <div v-else style="text-align: center">
              <a-empty :image="simpleImage" description="暂无数据" />
            </div>
          </template>
        </a-transfer>
      </div>
    </div>
    <a-divider />
  </div>
</template>
<script>
import { mapActions, mapState, mapMutations } from 'vuex';
import { RecycleScroller } from 'vue-virtual-scroller';
import { Empty } from 'ant-design-vue';
export default {
  components: { RecycleScroller },
  props: {
    title:String
  },
  data() {
    return {
      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
      search: {},
      targetKeys: [],
      selectedKeys: [],
      loading: false,
      tmpRows: []
    };
  },
  computed: {
    ...mapState('emailNotification', ['SMTList', 'notificationService']),
    SMTListF() {
      const a = JSON.parse(JSON.stringify(this.SMTList));
      this.tmpRows.forEach(element => {
        if (element) {
          const iIndex = a.findIndex(item => {
            return item.id === element.id;
          });
          if (iIndex === -1) {
            a.push(element);
          }
        }
      });
      return a;
    }
  },
  mounted() {
    const emailRow = JSON.parse(localStorage.getItem('emailRow') ?? '{}');

    if (Object.values(emailRow)?.length > 0) {
      this.targetKeys = emailRow.smtList;
      emailRow.smtListArr.forEach(item => {
        item.key = item.id;
        item.title = item.faultName;
      });
      this.setState({ key: 'SMTList', payload: emailRow.smtListArr });
      this.tmpRows = JSON.parse(JSON.stringify(emailRow.smtListArr));
    }
  },
  methods: {
    ...mapActions('emailNotification', ['getMaintenance']),
    ...mapMutations('emailNotification', ['setState']),
    async getData() {
      this.loading = true;
      await this.getMaintenance({ ...this.search, errorType: ['Sched. Maintenance'], pageNum: 1, pageSize: 99999 });
      this.loading = false;
    },
    changeCB(v, cb) {
      v.forEach(key => {
        cb(key, !this.selectedKeys.includes(key));
      });
      this.selectedKeys = [...v];
    },
    resetData() {
      this.loading = true;
      this.search = {};
      //   this.getData();
      this.setState({ key: 'notificationService', payload: { ...this.notificationService, smtList: [] }});
      this.loading = false;
    },
    handleChange(nextTargetKeys, direction, moveKeys) {
      const listRows = nextTargetKeys.map(item => {
        return this.SMTList.find(allItem => allItem.id === item);
      });
      this.tmpRows = [...this.tmpRows, ...listRows];
      this.targetKeys = nextTargetKeys;
      this.setState({ key: 'notificationService', payload: { ...this.notificationService, smtList: nextTargetKeys }});
      // this.$refs[`cright`].sValue = [];
      // this.$refs[`cleft`].sValue = [];
    },
    handleSelectChange(sourceSelectedKeys, targetSelectedKeys) {
      this.selectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys];
    }
  }
};
</script>
<style lang="less" scoped>
.transfer-item {
  width: 100%;
  margin-bottom: 20px;
}
.filter-conditions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  // margin-top: 15px;
}
.filter-btns {
  display: flex;
  justify-content: flex-start;
  // margin-top: 15px;
}
.radio-content {
  margin: 15px 0;
}
.flaut-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.input {
  margin-right: 15px;
}
</style>
